<template>
	<view class="content">
		<view class="serviceList" v-if="services.length>0">
			<view class="navList">
				<view @click="changNavIndex(index)" :class="navIndex==index?'border_bottom active':''" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<view class="services">
				<view class="one_service" v-for="(item,index) in services" :key="index">
					<view>
						<img :src="item.img" />
					</view>
					<view class="right">
						<view class="name">{{item.name}} <view class="right">剩余：14:18</view></view>
						<view class="text">设计师：{{item.tony}}</view>
						<view class="bottom">
							<view class="price">
								￥{{item.price}}
								<view class="s">￥{{item.price1}}</view>
							</view>
							<view class="service_num">
								<view>未付款{{item.num}}</view>
								<view><img src="../../static/img/common_icon/next.png" /></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nullbox" v-else>
			 <view class="content">
				 <image src="../../static/img/common_icon/mineOrder.png" mode=""></image>
				 <view class="title">亲还没有预约Tony老师哦～</view>
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navList: [{
						name: "全部"
					},
					{
						name: "未付款"
					},
					{
						name: "已预约"
					},
					{
						name: "已完成"
					}
				],
				services: [
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						tony: "Tony",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						tony: "Tony",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						tony: "Tony",
						price: 269,
						price1: 739,
						num: 100
					},
					{
						img: "../../static/img/index_service.png",
						name: "烫发",
						tony: "Tony",
						price: 269,
						price1: 739,
						num: 100
					}
				]
			};
		},
		onLoad() {},
		methods: {
			changNavIndex(e) {
				this.navIndex = e
			}
		}
	};
</script>

<style scoped>
	.serviceList {
		width: 670rpx;
		margin: 0 40rpx;
	}

	.serviceList .navList {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 400;
		height: 68rpx;
		line-height: 62rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
	.services {
		margin-bottom: 24rpx;
	}

	.one_service {
		width: 608rpx;
		height: 160rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 6rpx rgba(0, 0, 0, 0.06);
		border-radius: 40rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.one_service img {
		width: 160rpx;
		height: 160rpx;
	}

	.one_service .right {
		display: flex;
		/* justify-content: space-between; */
		flex-direction: column;
		margin-left: 32rpx;
		flex: 1;
	}

	.one_service .right .name {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: rgba(51, 51, 51, 1);
	}

	.one_service .right .text {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 38rpx;
	}

	.one_service .right .bottom {
		display: flex;
		justify-content: space-between;

	}

	.one_service .right .price {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 38rpx;
		color: rgba(229, 109, 34, 1);
	}

	.one_service .right .price .s {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: rgba(102, 102, 102, 1);
		text-decoration: line-through;
		display: inline-block;
		margin-left: 16rpx;
	}

	.one_service .right .service_num {
		display: flex;
		justify-content: space-between;
		width: 142rpx;
		height: 28rpx;
		background: rgba(13, 104, 102, 1);
		border-radius: 20rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		padding: 6rpx 4rpx 6rpx 14rpx;
	}

	.one_service .right .service_num img {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #fff;
	}
	.one_service .right .name:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
	.one_service .right .name .right{
		float: right;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
	.nullbox{
	    width: 100%;
	    height: 100vh;
	    margin: 0;
	    padding: 0;
		text-align: center;
	}
	.nullbox .content {
	    width: 300px;
	    height: 300px;
	    margin: 0 auto; /*水平居中*/
	    position: relative;
	    top: 50%; /*偏移*/
	    margin-top: -150px; 
	}
	.nullbox .content image{
		width: 400rpx;
		height: 400rpx;
	}
	.nullbox .content .title{
		margin-top: 100rpx;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:28rpx;
		color:rgba(153,153,153,1);
	}
</style>
